<template>
  <div>
    <div class="box_table">
      <el-dialog title="添加品牌" :visible.sync="updateViewVisible">

        品牌名称：<el-input style="width: 200px" v-model="brand.brandName" placeholder="请输入内容"></el-input>
        <br>
        品牌LOGO：
        <el-upload
            class="avatar-uploader"
            action="http://localhost:9527/brand/upload"
            name="files"
            :auto-upload="true"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <br>
        品牌分类：
        <template>
          <el-select v-model="brand.brandType" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
        <br>
        品牌故事：
        <div>

          <el-input
              style="width: 400px"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="brand.brandText">
          </el-input>
        </div>
        <br>
        是否上架：
        <template>
          <el-radio v-model="brand.brandStatus" label="1">是</el-radio>
          <el-radio v-model="brand.brandStatus" label="2">否</el-radio>
        </template>


        <div slot="footer" class="dialog-footer">
          <el-button @click="quxiaoabb()">取 消</el-button>
          <el-button type="primary" @click="upBrand()">确 定</el-button>
        </div>
      </el-dialog>


      <el-dialog title="添加品牌" :visible.sync="addViewVisible">

        品牌名称：<el-input style="width: 200px" v-model="brand.brandName" placeholder="请输入内容"></el-input>
        <br>
        品牌LOGO：
        <el-upload
            class="avatar-uploader"
            action="http://localhost:9527/brand/upload"
            name="files"
            :auto-upload="true"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"

            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <br>
        品牌分类：
        <template>
          <el-select v-model="brand.brandType" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
        <br>
        品牌故事：
        <div>

        <el-input
          style="width: 400px"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="brand.brandText">
      </el-input>
        </div>
        <br>
        是否上架：
        <template>
          <el-radio v-model="brand.brandStatus" label="1">是</el-radio>
          <el-radio v-model="brand.brandStatus" label="2">否</el-radio>
        </template>


        <div slot="footer" class="dialog-footer">
          <el-button @click="quxiaoabb()">取 消</el-button>
          <el-button type="primary" @click="addBrand()">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="品牌信息" :visible.sync="viewVisible">
        <el-table
            :data="itemTableData"
            style="width: 100%;">
          <el-table-column
              prop="id"
              label="序号"
              width="50">
          </el-table-column>
          <el-table-column
              prop="itemCode"
              label="编号"
              width="100">
          </el-table-column>
          <el-table-column
              prop="itemName"
              label="商品名称"
              width="100">
          </el-table-column>
          <el-table-column
              label="商品图片">
            <template v-slot="s">
              <el-avatar shape="square" size="large" :src="s.row.itemImg"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
              prop="cate.name"
              label="商品分类">
            <template v-slot="s">
              <el-link type="primary" @click="commodity(s.row)">查看分类</el-link>
            </template>
          </el-table-column>
          <el-table-column
              prop="column.ccname"
              label="商品栏目">
            <!--        <el-button type="primary" plain>查看栏目</el-button>-->
          </el-table-column>
          <el-table-column
              prop="itemColumn"
              label="商品品牌"
              width="80">
            <template v-slot="s">
              <el-avatar shape="square" size="large" :src="s.row.url"></el-avatar>
            </template>
          </el-table-column>

          <el-table-column
              prop="itemSellingPrice"
              label="价格/货号">
          </el-table-column>
          <el-table-column
              label="物流">
            <template v-slot="s">
              {{ s.row.itemLogisticsType1.logisticsType }}
            </template>
          </el-table-column>
          <el-table-column
              label="SKU库存">
            <template v-slot="s">
              <el-button @click="getSkuR(s.row.id)">查看SKU库存</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-dialog>
      <el-breadcrumb separator-class="el-icon-arrow-right" style="position:fixed;top: 13%">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>品牌管理</el-breadcrumb-item>
      </el-breadcrumb>
      <br>
      <el-button type="primary" plain size="medium" @click="addinit()" style="float: right;margin-bottom: 10px;margin-top: 10px">添加
      </el-button>
      <br>
      <div>
      <div>
        <el-form >
          输入搜索:
          <el-input v-model="brandName" placeholder="请输入品牌名称" style="width: 25%"></el-input>
          <el-button type="primary" plain @click="findBrandByName()">查找</el-button>
        </el-form>
      </div>
      <el-table
          :data="brandsAll"
          stripe
          style="width: 100%">
        <el-table-column
            prop="id"
            label="id"
        >
        </el-table-column>
        <el-table-column
            prop="brandCode"
            label="品牌编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="brandName"
            label="品牌名称">
        </el-table-column>
        <el-table-column
            label="品牌Logo">
          <template v-slot="s">
            <el-avatar shape="square" size="large" :src="s.row.imgUrl"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
            prop="enterTime"
            label="入住时间">
        </el-table-column>
        <el-table-column
            prop="brandType"
            label="品牌类别">
          <template v-slot="s">
            <el-tag v-if="s.row.brandType==1">国内</el-tag>
            <el-tag v-if="s.row.brandType==2">自营</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="brandText"
            label="品牌介绍">
        </el-table-column>
        <el-table-column
            label="是否下架">
          <template v-slot="s">
            <el-switch
                @change="alterSwitch(s.row.id,s.row.brandStatus)"
                v-model="s.row.brandStatus">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column
            label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" plain icon="el-icon-chat-dot-round" circle size="small"
                       @click="view(scope.row.id)"></el-button>
            <el-button type="primary" plain icon="el-icon-edit" circle size="small"
                       @click="updateBrand(scope.row)"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" circle size="small"
                       @click="delBrand(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      stale:1,
      updateViewVisible:false,
      brand:{
        brandName:'',
        imgUrl:'',
        brandType:'',
        brandText:'',
        brandStatus:'',
      },
      brandName:'',

      radio: '1',
      textarea: '',
      options: [{
        value: '1',
        label: '国内'
      }, {
        value: '2',
        label: '自营'
      }],
      value: '',
      imageUrl: '',
      list: null,
      viewVisible: false,
      addViewVisible: false,
      brandInfo: {},
      brandsAll: {},
      itemTableData: [],//商品表格信息
    }
  },
  methods: {
    //开关方法
    alterSwitch(id, brandStatus) {
      // console.log(this.row)
      //请求方式为post
      this.$axios.post("http://localhost:9527/brand/alterSwitch",
          {
            id: id,
            brandStatus: brandStatus
          }).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '状态已修改!'
          });
        }
      })
    },

    upBrand(){
      this.brand.imgUrl = this.imageUrl
      if (this.brand.brandStatus == 1){
        this.brand.brandStatus = true
      }else {
        this.brand.brandStatus = false
      }
      console.log(this.brand)
      this.$axios({
        method: "post",
        url: "/brand/upBrand",
        data: this.brand

      }).then(res => {
        if (res.data.code == 200) {
          alert("编辑成功")
          this.updateViewVisible = false;
          this.imageUrl= ''
          this.brand = {
            brandName:'',
            imgUrl:'',
            brandType:'',
            brandText:'',
            brandStatus:'',
          }
          this.loadData()
        } else {
          alert("编辑失败")
          this.viewVisible = false
          this.loadData()
        }
      })

    },
    updateBrand(data){
      this.updateViewVisible = true;
      this.brand = data
    },

    delBrand(id){
      this.$confirm('确定要删除该品牌', {
        confirmButtonText: '是的',
        cancelButtonText: '稍等',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: "get",
          url: "/brand/delBrand",
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.loadData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    findBrandByName(){

      this.$axios({
        method: "get",
        url: "brand/getAllBrand",
        params:{
          page:this.page,
          brandName:this.brandName
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.pageInfo = res.data.data
          this.brandName = ''
        }
      })
    },

    addBrand(){
      this.brand.imgUrl = this.imageUrl
      if (this.brand.brandStatus == 1){
        this.brand.brandStatus = true
      }else {
        this.brand.brandStatus = false
      }
      console.log(this.brand)
      this.$axios({
        method: "post",
        url: "brand/addbrand",
        data: this.brand

      }).then(res => {
        if (res.data.code == 200) {
          alert("添加成功")
          this.addViewVisible = false;
          this.imageUrl= ''
          this.brand = {
            brandName:'',
            imgUrl:'',
            brandType:'',
            brandText:'',
            brandStatus:'',
          }
          this.loadData()
        } else {
          alert("添加失败")
          this.viewVisible = false
          this.loadData()
        }
      })
    },

    quxiaoabb(){
      this.addViewVisible = false;
      this.imageUrl= ''
      this.brand = {
        stale: 1,
        brandName:'',
        imgUrl:'',
        brandType:'',
        brandText:'',
        brandStatus:'',
      }
    },


    handleAvatarSuccess(res, file) {
      this.imageUrl=res.data
      console.log(res)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },




    addinit(){
      this.addViewVisible = true
    },
    handleCurrentChange(val) {
      this.page = val
      this.loadData()
    },
    loadData() {
      this.$axios({
        method: "get",
        url: "brand/getAllBrand",
      }).then(res => {
        if (res.data.code == 200) {
          this.brandsAll = res.data.data
        }
      })
    },
    view(id) {
      this.viewVisible = true
      this.$axios({
        url: "item/getAllItem",
        method: "get",
        params: {
          itemBrandId:id,
          status: this.stale
        }
      }).then(res => {
        this.itemTableData = res.data.data;
      })
      console.log(this.itemTableData)
    }
  },
  created() {
    this.loadData()
  }
}
</script>

<style>
.box_table {
  width: 95%;
  margin: 0 auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


</style>
